<template>
	<!-- <div v-show="showCanvas"> -->
	<div class="container">
		<canvas canvas-id="mycanvas" class="mycanvas" disable-scroll="true" @touchstart="ontouchstart"
			@touchmove="touchmove" @touchend="touchend">
		</canvas>
		<view class="" style="height: 100%;font-weight: bold;display: flex;justify-content: center;align-items: center;font-size: 240rpx;color:#EEEEEE;height: 350rpx;background-color: #FFFFFF;">请签名</view>
		<view class="submit-button">
			<button  class="button-one" @click="clear">清除 </button>
			<button  class=" button-two" :class="{'background':startShow}" @click="submitButton" :disabled="disabled">完成</button>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				headerStyleHeight: 0,
				headerStyleTop: 0,
				oc: "",
				points: [], //路径点集合
				showCanvas: false, //
				show: true,
				disabled:false,//是否禁用完成按钮
				img:'',
				startShow:false,//是否有开始签名  fasle  没有  ture有
				type:'',
				bType:''//点击的是乙方签署合同按钮  还是  监护人签署合同按钮
			};
		},
		mounted() {
			this.clear();
		},
		onShow() {
			this.initCanvas();
		},
		onLoad(options) {
			if(options.type){
				this.type=options.type
			}
			if(options.bType){
				this.bType=options.bType
			}
			console.log('获取即将签名的类型',this.type,this.bType)
			this.startShow=false
		},
		methods: {
			// 签名完成
			submitButton() {
				var that=this
				console.log('this',this.canvas)
				uni.canvasToTempFilePath({
					canvasId: "mycanvas",
					success: (res) => {
						console.log("res", res.tempFilePath);
						that.canvas= res.tempFilePath
						const canvas = res.tempFilePath
						console.log('获取最终签名完成后的图片',canvas)
						let pages = getCurrentPages();
						console.log('路由page',pages)
						// 当前页面修改上个页面的值
						for(let i in pages){
							let prePage = pages[i];
							if(prePage.route === "pages/componentsB/steps/index"){
								if(that.type==1|| that.type==2){
									console.log('走的签名赋值1或者2')
									prePage.$vm.image1=canvas
								}else{
									console.log('走的签名赋值3或者4')
									if(that.bType==='乙方'){//判断btype的类型为哪一种按钮，依次显示下面的按钮
										prePage.$vm.image1=canvas
										prePage.$vm.bType='乙方'
									}else{
										prePage.$vm.image2=canvas
										prePage.$vm.bType=''//当bType的类型为监护人的时候，要清空下btype，避免监护人按钮重复出现
									}
								}
								prePage.$vm.startShow=false//关闭保存合同按钮
								prePage.$vm.disabledOne=true//关闭保存合同按钮
								console.log('获取前一个页面的参数',prePage.$vm.image)
							}
						}
						if(!that.startShow){
							that.$.toast('您还未签名，请先签名')
						}else{
							uni.navigateBack({
								url:'../../componentsB/steps/index'
							})
						}
					},
				});
			},

			initCanvas() {
				this.showCanvas = true;
				this.oc = uni.createCanvasContext("mycanvas");
				//设置画笔样式
				this.oc.lineWidth = 4;
				this.oc.lineCap = "round";
				this.oc.lineJoin = "round";
				this.oc.strokeStyle = "black";
				this.oc.fillStyle = "#fff";
				this.oc.lineWidth = 5;
				this.oc.fillRect(0, 0, 400, 700);
				this.oc.fill();
				this.oc.draw();
			},
			ontouchend(e) {
				console.log("结束啊啊啊啊");
				oc.ontouchmove = null;
				this.show = false;
			},
			ontouchmove(e) {
				const {
					clientX,
					clientY
				} = e.changedTouches[0];
				oc.lineTo(clientX - oc.offsetLeft, clientY - oc.offsetTop);
				oc.stroke();
			},
			//触摸开始，获取到起点

			ontouchstart(e) {
				this.startShow=true//显示完成按钮
				this.disabled=false//开放完成按钮
				const startX = e.changedTouches[0].x;
				const startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY,
				};
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.oc.beginPath();
			},
			//触摸移动，获取到路径点
			touchmove(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY,
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
			},

			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend() {
				this.points = [];
				this.show = false;
			},

				/* ***********************************************
				#   绘制笔迹
				#   1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
				#   2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
				#   3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
				************************************************ */
			draw() {
				let point1 = this.points[0];
				let point2 = this.points[1];
				this.points.shift();
				this.oc.moveTo(point1.X, point1.Y);
				this.oc.lineTo(point2.X, point2.Y);
				this.oc.stroke();
				this.oc.draw(true);
			},
			//清空画布
			clear() {
				this.show = true;
				let that = this;
				uni.getSystemInfo({
					success: (res) => {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.oc.clearRect(0, 0, canvasw, canvash);
						that.oc.draw(true);
						//   that.initCanvas();
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	.container {
		height: 100vh;
		position: relative;
		.button {
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 20px;
			border: 1px solid #bbbbbb;
		}

		.header-box {
			width: 100%;
			background-color: #ffffff;
			padding-bottom: 20rpx;
			color: red;
		}

		.content-box {
			width: 100%;
			height: 500px;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.signature {
			position: fixed;
			top: 10px;
			left: 2%;
			z-index: 999;
			width: 96%;
		}

		.mycanvas {
			width: 100%;
			height: 350rpx;
			position: absolute;
		}

		.footer {
			font-size: 14px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background: #f2f3f5;

			.footer-wrap {
				height: 100%;
				padding: 57rpx 37rpx 17rpx 37rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
			}
		}

		.sty-single {
			position: absolute;
			top: 70rpx;
			left: 0rpx;
			width: 569rpx;
			height: 200rpx;
			z-index: 111;
		}
		.submit-button{
			display: flex;
			padding-bottom: 30rpx;
			padding-top: 20rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			width: 100%;
			button{
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 15rpx;
			}
			.button-one{
				flex: 4;
				color: #136cfa !important;
				background-color: #FFFFFF;
				margin-right: 20rpx;
			}
			.button-two{
				flex: 6;
				border-radius: 15rpx;
				background-color: #E1E2E4;
				color: #A9A9A9;
			}
			.newColor{
				color: #80A7FB !important;
				opacity: 0.9  !important;
			}
			.background{
				flex: 6;
				border-radius: 15rpx;
			   background: linear-gradient(159deg, #80e6fc 0%, #0051ff 99%) !important;
				color: #FFFFFF  !important;
			}
		}
	}
</style>